import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";

// 商品仓库
const foodsStore = createSlice({
  // 仓库名称(唯一)
  name: "foods",
  // 初始化数据
  initialState: {
    // 商品列表数据
    foodsList: [],
    // 当前菜单激活的下标
    activeIndex: 0,
    // 购物车列表
    cartList: [],
  },
  // 同步修改状态的reducer方法
  reducers: {
    // 修改商品列表数据
    setFoodsList(state, action) {
      // action.payload: 调用函数传递的数据
      state.foodsList = action.payload;
    },
    // 修改当前激活的菜单下标
    setActiveIndex(state, action) {
      state.activeIndex = action.payload;
    },
    // 添加到购物车
    addCart(state, action) {
      // 判断购物车中是否已经有当前商品
      // find()方法返回数组中满足提供的测试函数的第一个元素的值,否则返回 undefined
      const item = state.cartList.find((item) => item.id === action.payload.id);
      // 有当前商品数量加1,没有当前商品添加到购物车
      item
        ? item.count++
        : state.cartList.push({ ...action.payload, count: 1 });
    },
    // 从购物车中移除商品
    removeCart(state, action) {
      // 获取当前当前商品
      const item = state.cartList.find((item) => item.id === action.payload.id);
      // 商品数量减1，如果商品数量为0，则从购物车列表中移除
      item.count--;
      if (item.count === 0) {
        state.cartList = state.cartList.filter(
          (item) => item.id !== action.payload.id
        );
      }
    },
    // 清空购物车中的商品
    clearCart(state) {
      state.cartList = [];
    },
  },
});

// 解构出同步修改状态的方法
const { setFoodsList, setActiveIndex, addCart, removeCart, clearCart } =
  foodsStore.actions;

// 异步获取数据并修改状态方法
const getFoodsList = () => {
  // 返回一个异步函数，函数接收默认参数dispatch用于调用同步修改状态的方法
  return async (dispatch) => {
    // 发请求获取数据
    const res = await axios.get("http://localhost:3004/takeaway");
    // 使用dispatch调用同步方法修改状态
    dispatch(setFoodsList(res.data));
  };
};
// 将修改仓库状态的方法进行暴露
export { getFoodsList, setActiveIndex, addCart, removeCart, clearCart };

// 将商品仓库暴露出去
const reducer = foodsStore.reducer;
export default reducer;
